<template>
  <div align="center">
   <el-card>
       <el-steps :active="active" process-status="finish" align-center style="margin-bottom: 40px;">
        <el-step title="选择商品分类"></el-step>
        <el-step title="填写商品信息"></el-step>
        <el-step title="填写商品属性"></el-step>
      </el-steps>
      <el-button  @click="next" type="primary" plain>下一步</el-button>
      <br/><br/><br/>
      <!--选择分类-->
        <el-card shadow="hover" style="width:650px">
          <el-cascader-panel :options="options" @change="datachange" v-model="category3Ids" style="width:610px"></el-cascader-panel>
        </el-card>
        <br/><br/>
          <div>
          <!-- 商品类别的显示 -->
          <span style="color:#909399;">您当前选择的商品类别是:</span>
            <span style="color:red">
              <span v-if="category3Ids.length > 0">{{showTbSpuData.category1IdLabel}}</span>
              <span v-if="category3Ids.length > 1"> &nbsp;>{{showTbSpuData.category2IdLabel}}</span>
              <span v-if="category3Ids.length > 2"> &nbsp;>{{showTbSpuData.category3IdLabel}}</span>
            </span>
          </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      tbSpu: {},
      options: [],
      goodsInfo: {
        saleService: []
      },
      category3Ids: [],
      showTbSpuData: {}
    }
  },
  created () {
    this.getLevelAll()
  },
  methods: {
    /**
     * 选择类别的显示,动态刷新,三级联动
     */
    verdict () {
      // 选中了三级菜单
      if (this.category3Ids.length === 3) {
        // 对整个数据进行遍历查找
        this.options.forEach(item => {
          // 一级目录数据和选中的级联数组匹配则对类别显示的数据进行赋值
          if (item.value === this.category3Ids[0]) {
            this.showTbSpuData.category1IdLabel = item.label
          }
          /**
           * item.children !== undefined 对数组进行非空验证
           */
          if (item.children !== undefined && item.children.length > 0) {
            item.children.forEach(item1 => {
              if (item1.value === this.category3Ids[1]) {
                this.showTbSpuData.category2IdLabel = item1.label
              }
              if (item1.children !== undefined && item1.children.length > 0) {
                item1.children.forEach(item2 => {
                  if (item2.value === this.category3Ids[2]) {
                    this.showTbSpuData.category3IdLabel = item2.label
                  }
                })
              }
            })
          }
        })
      }
    },
    // 值改变事件
    datachange  () {
      this.verdict()
    },
    // 查询所有的分类信息
    async getLevelAll () {
      const { data: res } = await this.$http.get('/goods/category/list')
      // 获取分类信息
      this.options = res.data.list
      this.previousData()
    },
    previousData () {
      // 拿到上一步路由中携带的参数，回显数据
      if (this.$route.query.category3Ids != null) {
        this.category3Ids = this.$route.query.category3Ids // 转成json数据
      }
      if (this.$route.query.showSpuInfo != null) {
        this.showTbSpuData = JSON.parse(decodeURIComponent(this.$route.query.showSpuInfo))
      }
      if (this.$route.query.goodsInfo != null) {
        this.goodsInfo = JSON.parse(decodeURIComponent(this.$route.query.goodsInfo)) // 第二步输入的信息
      }
    },
    // 下一步(query传参是以/gg?a='b'&c=1...)
    next () {
      if (this.category3Ids.length !== 3) {
        this.$message.warning('请选择')
        return
      }
      // 路由不直接传递对象
      const data = JSON.stringify(this.showTbSpuData)
      // console.log(encodeURIComponent(data))
      this.$router.push({
        path: '/goods/goodsInfo',
        query: {
          index: 1,
          category3Ids: this.category3Ids,
          showSpuInfo: encodeURIComponent(data), // 转成string格式
          goodsInfo: encodeURIComponent(JSON.stringify(this.goodsInfo))
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
